<template>
	<!-- 商品类目 -->
	<div id="productList">
		<template>
			<el-button type="primary" icon="el-icon-edit" @click="addCategory">添加</el-button>
		</template>
		<template>
			<el-table :data="tableData" style="width: 100%" :header-cell-style="{textAlign:'center'}"
				:cell-style="{textAlign:'center'}" :border="true" id="tab" row-key="id"
				:tree-props="{children: 'children'}">
				<el-table-column prop="id" label="类目ID">
				</el-table-column>
				<el-table-column prop="name" label="类目名">
				</el-table-column>
				<el-table-column prop="address" label="类目图标">
					<template slot-scope="scope">
						<img :src="scope.row.iconUrl" class="pic" />
					</template>
				</el-table-column>
				<el-table-column prop="address" label="类目图片">
					<template slot-scope="scope">
						<img :src="scope.row.picUrl" class="pic2" />
					</template>
				</el-table-column>
				<el-table-column prop="keywords" label="关键字">
				</el-table-column>
				<el-table-column prop="desc" label="简介">
				</el-table-column>
				<el-table-column prop="address" label="级别">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.level=='L1'" type="success">
							一级栏目
						</el-tag>
						<el-tag v-if="scope.row.level=='L2'" type="info">
							二级栏目
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<!-- 对话框 -->
		<el-dialog :title="ruleForm.flag?'添加商品类目':'编辑商品类目'" :visible.sync="dialogVisible" width="50%">

			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="类目名称" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="关键字" prop="keywords">
					<el-input v-model="ruleForm.keywords"></el-input>
				</el-form-item>
				<el-form-item label="级别" prop="value">
					<template>
						<el-select v-model="ruleForm.value" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" >
							</el-option>
						</el-select>
					</template>
				</el-form-item>
				<!-- 父类目 -->
				<el-form-item label="父类目" prop="value2" v-if="ruleForm.value=='L2'">
					<template>
						<el-select v-model="ruleForm.value2">
							<el-option v-for="item in options2" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-form-item>
				<!-- 父类图标 -->
				<el-form-item label="类目图标" prop="imageUrl">
					<el-upload :headers="tokens" class="avatar-uploader"
						action="http://192.168.1.54:8080/admin/storage/create" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<!--类目图片 -->
				<el-form-item label="类目图片" prop="imageUrl2">
					<el-upload :headers="tokens" class="avatar-uploader"
						action="http://192.168.1.54:8080/admin/storage/create" :show-file-list="false"
						:on-success="handleAvatarSuccess2">
						<img v-if="ruleForm.imageUrl2" :src="ruleForm.imageUrl2" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<!-- 类目简介 -->
				<el-form-item label="类目简介" prop="desc">
					<template>
						<el-input v-model="ruleForm.desc"></el-input>
					</template>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
		
		<template>
			<!-- 这里是分页功能 -->
			<div class="block2">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		
		</template>
		
		
	</div>
</template>

<script>
	import {
		allCategory,
		addMoreCategory,
		upCategory
	} from '../../https/mall'
	export default {
		data() {
			return {
				// 普通表格
				tableData: [],
				// 对话框是否开启
				dialogVisible: false,
				// 进行校验
				ruleForm: {
					// 类目名称
					name: '',
					// 关键字
					keywords: '',
					// 级别
					value: 'L2',
					// 父类目
					value2: 0,
					// 图片校验
					imageUrl: '',
					// 类目图片
					imageUrl2: '',
					// 类目简介
					desc: '',
				
				},
				// 规则处理
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					keywords: [{
						required: true,
						message: '请输入关键字',
						trigger: 'blur'
					}]
				},
				// 下拉选择的框子
				options: [{
					value: 'L1',
					label: '一级栏目'
				}, {
					value: 'L2',
					label: '二级栏目'
				}],
				// 父类目的框子
				options2: [],
				// 图片的token值
				tokens: {
					"X-Litemall-Admin-Token": ''
				},
				// 限制条数
				limit:10,
				// 页数
				page:1,
				// 总数
				total:0,
				// 类目id
				id:'',
				// 进行切换,true代表是
				flag: true,
				
				
				

			}
		},
		methods: {
			addCategory() {
				// 添加商品类目
				this.dialogVisible = true
				// 将切换换成true
				this.flag = true
				// 初始化
				// 校验规则进行初始化
				if (this.$refs.ruleForm !== undefined) {
					this.$refs.ruleForm.resetFields();
				}

			},

			handleEdit(row) {
				// 编辑
				console.log("编辑用户",row)
				this.flag=false
				this.dialogVisible=true
				this.$nextTick(()=>{
					// 关闭重置
					this.$refs.ruleForm.resetFields()
					// 将值进行赋值
					this.id=row.id
					this.ruleForm.name=row.name
					this.ruleForm.imageUrl=row.iconUrl
					this.ruleForm.imageUrl2=row.picUrl
					this.ruleForm.keywords=row.keywords
					this.ruleForm.desc=row.desc
					this.ruleForm.value=row.level
					
				})
				
			
			},
			handleDelete(row) {
				// 删除
			},
				
			// 分页功能
			handleSizeChange(val) {
				// 分页改变显示数据
				// console.log(`每页 ${val} 条`);
				this.limit = val
				this.selAll()
			
			},
			handleCurrentChange(val) {
				// 当前页码的数据
				// console.log(`当前页: ${val}`);
				this.page = val
				this.selAll()
			},	
				
				
			handleAvatarSuccess(res, file) {
				// 上传图片
				console.log("我是file", file)
				// 这里将图片地址上传
				this.ruleForm.imageUrl = file.response.data.url
			},
			handleAvatarSuccess2(res, file) {
				// 上传图片
				console.log("我是file2", file)
				// 这里将图片地址上传
				this.ruleForm.imageUrl2 = file.response.data.url
			},
			// 查询所有的数据
			selAll(){
				allCategory().then(res => {
					console.log("我是商品类目的列表", res)
					this.tableData = res.data.data.list
					this.total=res.data.data.total
					// 处理父级栏目
					for (let i = 0;  i <this.tableData.length; i++) {
						let obj={
							// 实际值
							 value:this.tableData[i].id,
							 // 显示值
								label:this.tableData[i].name
						}
						this.options2.push(obj)
						/* 这里本来是想做一个过滤的 */
						// this.options2.filter((currentValue, indedx, arr)=>{	
						// })
					}

				}).then(err => {
					console.log("我是错误的商品类目列表", err)
				})
			},

			// 提交表单
			submit() {
				if (this.flag) {
					// 添加
					this.$refs.ruleForm.validate((valid) => {
						if (valid) {
							// 校验成功
							let params = {
								// 类目名称
								name: this.ruleForm.name,
								// 关键字
								keywords: this.ruleForm.keywords,
								// 级别
								level: this.ruleForm.value,
								// 父类目
								pid: this.ruleForm.value2,
								// 类目简介
								desc: this.ruleForm.desc,
								// 类目图标
								iconUrl: this.ruleForm.imageUrl,
								// 类目图片
								picUrl: this.ruleForm.imageUrl2,
							}
							addMoreCategory(params).then(res => {
								console.log("成功返回的数据", res)
								if (res.data.errmsg = '成功') {
									this.$notify({
										title: '成功',
										message: '添加成功',
										type: 'success'
									});
									// 重新进行数据的渲染
									
									this.selAll()
									// 关闭
									this.dialogVisible=false
								}else{
									this.$notify({
										title: '失败',
										message: '添加失败',
										type: 'error'
									});
										this.dialogVisible=false
								}

							}).catch(err => {

							})

						}

					})
				} else {
					// 修改
					this.$refs.ruleForm.validate((valid) => {
						if (valid) {
							// 校验成功
						let params = {
							id:this.id,
							// 类目名称
							name: this.ruleForm.name,
							// 关键字
							keywords: this.ruleForm.keywords,
							// 级别
							level: this.ruleForm.value,
							// 父类目
							pid: this.ruleForm.value2,
							// 类目简介
							desc: this.ruleForm.desc,
							// 类目图标
							iconUrl: this.ruleForm.imageUrl,
							// 类目图片
							picUrl: this.ruleForm.imageUrl2,
						}
							
							upCategory(params).then(res=>{
								if(res.data.errmsg = '成功'){
									console.log("编辑成功",res)
									this.$notify({
										title: '成功',
										message: '编辑成功',
										type: 'success'
									});
									this.selAll()
							
									this.dialogVisible=false
								}else{
									this.$notify({
										title: '编辑失败',
										message: '编辑失败',
										type: 'error'
									});
								}
								
							}).catch(err=>{
								console.log("编辑失败",err)
							})
							
							
						}

					})

				}



			}


		},
		mounted() {
			// 挂载的时候将值传入进去
			// 将token值进行存储
			this.tokens["X-Litemall-Admin-Token"] = this.Cookies.get('token')

			this.selAll()

		}

	}
</script>

<style>
	#tab {
		margin-top: 20px;
	}

	#tab2 {}

	.pic {
		width: 40px;
		height: 40px;
	}

	.pic2 {
		width: 80px;
		height: 80px;
	}

	.demo-ruleForm .el-input {
		min-width: 300px;
	}

	.demo-ruleForm .el-input__inner {
		width: 300px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	.el-form-item__label {
		font-weight: bolder;
	}
	.block2 {
		margin-top: 20px;
	}
</style>
